<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import { useAppStore } from "@/store/modules/app";
const appStore = useAppStore();

const HeaderMain = defineAsyncComponent(
  () => import("@/components/HeaderMain/index.vue")
);

import autofit from "autofit.js";
onMounted(() => {
  autofit.init({
    dw: 1920,
    dh: 919,
    el: "#ma",
    resize: true,
  });
});
onUnmounted(() => {
  autofit.off();
});
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <div class="bg" id="ma">
      <header-main />
      <router-view class="mains" />
    </div>
  </el-config-provider>
</template>
<style scoped lang="scss">
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("@/assets/page_bg_img.jpg") no-repeat center;
  background-size: cover;

  .mains {
    //height: calc(100% - 88px);
    //margin-top: -40px;
    height: calc(100%);
  }
}
</style>
